<script setup lang="ts">
import { ref } from "vue";
import { useRoute } from "vue-router";

const route = useRoute();
const userInfo = ref({
  id: route.query.id || "",
  currentDealer: route.query.currentDealer || "",
  belongDealer: route.query.belongDealer || ""
});
const errMsg = ref(route.query.errMsg || "");
const user = ref(route.query.user || "");
const linkDealer = ref(route.query.linkDealer || "");
const dealer = ref(route.query.dealer || "");
</script>

<template>
  <div
    class="min-h-screen bg-gradient-to-b from-blue-50 to-white flex flex-col relative overflow-hidden"
  >
    <!-- 背景装饰 -->
    <div class="absolute inset-0 overflow-hidden pointer-events-none">
      <!-- 左上角装饰 -->
      <div
        class="absolute -left-16 -top-16 w-48 h-48 bg-gradient-to-br from-blue-100 to-blue-200 rounded-full opacity-10 blur-3xl"
      ></div>
      <!-- 右上角装饰 -->
      <div
        class="absolute -right-16 top-32 w-64 h-64 bg-gradient-to-bl from-blue-200 to-blue-300 rounded-full opacity-10 blur-3xl"
      ></div>
      <!-- 底部装饰 -->
      <div
        class="absolute -bottom-8 left-1/2 -translate-x-1/2 w-96 h-32 bg-gradient-to-r from-blue-50 to-blue-100 rounded-full opacity-20 blur-2xl"
      ></div>
      <!-- 波浪纹理 -->
      <div class="absolute inset-0 opacity-5">
        <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
          <defs>
            <pattern
              id="wave"
              width="100"
              height="100"
              patternUnits="userSpaceOnUse"
            >
              <path
                d="M0 50 Q 25 25, 50 50 T 100 50"
                stroke="currentColor"
                fill="none"
                stroke-width="1"
              />
            </pattern>
          </defs>
          <rect width="100%" height="100%" fill="url(#wave)" />
        </svg>
      </div>
    </div>

    <!-- 内容区域 -->
    <div
      class="flex-1 flex flex-col items-center justify-center px-6 relative z-10"
    >
      <!-- 图标部分 -->
      <div class="w-16 h-16 mb-12">
        <div
          class="w-full h-full rounded-full bg-white/80 backdrop-blur-sm flex items-center justify-center shadow-md"
        >
          <span class="text-blue-400 text-3xl font-light">i</span>
        </div>
      </div>

      <!-- 文字内容部分 -->
      <div class="w-full max-w-md text-center">
        <!-- <h1 class="text-xl font-medium text-gray-700 mb-8">
          请从正确的链接进入
        </h1> -->
        <div class="space-y-2 mb-12">
          <p class="text-blue-400">尊敬的用户</p>
          <p class="text-blue-400">{{ errMsg }}</p>
          <p class="text-blue-400">请从您所属群主的分享链接进入</p>
        </div>

        <!-- 信息展示部分 -->
        <div
          class="bg-white/80 backdrop-blur-sm rounded-2xl px-6 py-5 shadow-md space-y-4"
        >
          <div class="flex items-center text-gray-600">
            <span class="flex-1 text-right text-gray-500">您的信息：</span>
            <span class="ml-3 flex-1 text-left">{{ user }}</span>
          </div>
          <div class="flex items-center text-gray-600">
            <span class="flex-1 text-right text-gray-500"
              >您所属的经销商：</span
            >
            <span class="ml-3 flex-1 text-left">{{ dealer }}</span>
          </div>
          <div class="flex items-center text-gray-600">
            <span class="flex-1 text-right text-gray-500"
              >当前链接经销商：</span
            >
            <span class="ml-3 flex-1 text-left">{{ linkDealer }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.min-h-screen {
  min-height: 100vh;
}
</style>
